<template>
	<view>
		<cu-custom bgColor="bg-white-nav" isBack>
			<block slot="content">账户管理</block>
		</cu-custom>
		<view class="padding">
			<u-swipe-action>
				<u-swipe-action-item :options="options" :index="index" :name="item.name" v-for="(item,index) in list" :key="index" @click="handleDelete">
					<view class="box">
						<image class="avatar" mode="aspectFill" :src="item.avatar" />
						<view class="right">
							<view class="u-flex u-flex-between u-flex-y-center">
								<view class="name">{{item.name}}</view>
								<view class="cur-bind" :class="'state__' + item.status">{{item.status == '1' ? '在线' : (item.status == '2' ? '离线' : '登录失效')}}</view>
							</view>
							<view class="num">账号:{{item.account}}</view>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		<view class="cu-bar tabbar foot p-l30 p-r30">
			<button class="common-btn">
				<text class="cuIcon cuIcon-add"></text>
				绑定账号
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				list: [{
						id: 1,
						avatar: '/static/images/tabbar/order.png',
						name: '小红书1号',
						account: '1312312321',
						status: '1',
					},
					{
						id: 2,
						avatar: '/static/images/tabbar/order.png',
						name: '小红书2号',
						account: '1789541932',
						status: '2',
					},
					{
						id: 3,
						avatar: '/static/images/tabbar/order.png',
						name: '小红书3号',
						account: '1431412312',
						status: '3',
					},
				]
			}
		},
		methods: {
			handleDelete(item) {
				console.log(item)
			}
		}
	}
</script>

<style lang="scss">
	.u-swipe-action-item {
		margin-bottom: 20rpx;
		// border-radius: 16rpx;
		font-size: 26rpx;
	}
	::v-deep .u-swipe-action-item__content {
		border-radius: 13rpx;
	}
	::v-deep .u-swipe-action-item__right__button__wrapper {
		border-top-right-radius: 16rpx !important;
		border-bottom-right-radius: 16rpx !important;
	}
	.box {
		padding: 28rpx 30rpx;
		display: flex;

		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.right {
			flex: 1;
		}

		.name {
			font-size: 30rpx;
			color: #111;
		}

		.cur-bind {
			position: relative;
			&::after {
				content: '';
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				position: absolute;
				left: -20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.num {
			margin-top: 10rpx;
			color: #666;
		}
	}

	.action-item {
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		font-size: 26rpx;
	}
	
	.state {
		&__1 {
			color: #00B578;
			&::after {
				background: #00B578;
			}
		}
		&__2 {
			color: #999;
			&::after {
				background: #999;
			}
		}
		&__3 {
			color: #FA5151;
			&::after {
				background: #FA5151;
			}
		}
	}
	.bind-btn {
		padding: 16rpx 30rpx;
		background: #fff;
	}
</style>